<template>
    <div>
        <page-main>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="项目进度报表" name="first">
                        <el-row :gutter="20" style="margin: 0 10px; background: #f2f6fc;">
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    项目
                                    <div style="font-size: 2.5em; color: #3dd1ae;">44</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    待处理任务
                                    <div style="font-size: 2.5em; color: #3dd1ae;">32</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    未开始
                                    <div style="font-size: 2.5em; color: #3dd1ae;">10</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    进行中
                                    <div style="font-size: 2.5em; color: #3dd1ae;">2</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    近期未完成
                                    <div style="font-size: 2.5em; color: #3dd1ae;">2</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle" heigth="150px">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    <el-progress :width="80" :heigth="80" type="dashboard" :percentage="percentage" :color="colors" />
                                </page-main>
                            </el-col>
                        </el-row>
                        <page-main>
                            <el-table ref="table" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" :data="dataList" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                                <el-table-column prop="projectName" label="项目" />
                                <el-table-column prop="position" label="项目状态" />
                                <el-table-column prop="total" label="总任务" />
                                <el-table-column prop="notStarted" label="未开始" />
                                <el-table-column prop="doing" label="进行中" />
                                <el-table-column prop="completed" label="已完成" />
                                <el-table-column prop="progress" label="完成率">
                                    <template slot-scope="scope">
                                        <el-progress
                                            type="line"
                                            :text-inside="true"
                                            :stroke-width="24"
                                            :percentage="scope.row.progress"
                                            :color="scope.row.color"
                                        />
                                    </template>
                                </el-table-column>
                            </el-table>
                        </page-main>
                    </el-tab-pane>
                    <el-tab-pane label="项目延迟报表" name="second">
                        <el-row :gutter="20" style="margin: 0 10px; background: #f2f6fc;">
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    项目
                                    <div style="font-size: 2.5em; color: #3dd1ae;">20</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    待处理任务
                                    <div style="font-size: 2.5em; color: #3dd1ae;">10</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    未开始
                                    <div style="font-size: 2.5em; color: #3dd1ae;">2</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    进行中
                                    <div style="font-size: 2.5em; color: #3dd1ae;">5</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    近期未完成
                                    <div style="font-size: 2.5em; color: #3dd1ae;">3</div>
                                </page-main>
                            </el-col>
                            <el-col :span="4" align="middle" heigth="150px">
                                <page-main style="margin: 0; background: #f2f6fc;">
                                    <el-progress :width="80" :heigth="80" type="dashboard" :percentage="percentage2" :color="colors" />
                                </page-main>
                            </el-col>
                        </el-row>
                        <page-main>
                            <el-table ref="table" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" :data="dataList2" border stripe highlight-current-row @selection-change="selectionDataList = $event">
                                <el-table-column prop="projectName" label="项目" />
                                <el-table-column prop="position" label="项目状态" />
                                <el-table-column prop="total" label="总任务" />
                                <el-table-column prop="notStarted" label="未开始" />
                                <el-table-column prop="doing" label="进行中" />
                                <el-table-column prop="completed" label="已完成" />
                                <el-table-column prop="progress" label="完成率">
                                    <template slot-scope="scope">
                                        <el-progress
                                            type="line"
                                            :text-inside="true"
                                            :stroke-width="24"
                                            :percentage="scope.row.progress"
                                            :color="scope.row.color"
                                        />
                                    </template>
                                </el-table-column>
                            </el-table>
                        </page-main>
                    </el-tab-pane>
                </el-tabs>
            </el-tabs>
        </page-main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'first',
            percentage: 60,
            percentage2: 10,
            colors: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#5cb87a', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#6f7ad3', percentage: 100}
            ],
            dataList: [
                {
                    projectName: '科技创新项目',
                    position: '正常',
                    total: '20',
                    notStarted: '5',
                    doing: '10',
                    completed: '6',
                    progress: 60,
                    color: 'green'
                },
                {
                    projectName: '应急项目',
                    position: '正常',
                    total: '15',
                    notStarted: '4',
                    doing: '5',
                    completed: '6',
                    progress: 60,
                    color: 'green'
                },
                {
                    projectName: '应急项目',
                    position: '正常',
                    total: '15',
                    notStarted: '4',
                    doing: '5',
                    completed: '6',
                    progress: 60,
                    color: 'green'
                }
            ],
            dataList2: [
                {
                    projectName: '科技创新项目',
                    position: '正常',
                    total: '15',
                    notStarted: '4',
                    doing: '5',
                    completed: '6',
                    progress: 20,
                    color: 'orange'
                },
                {
                    projectName: '应急项目',
                    position: '正常',
                    total: '16',
                    notStarted: '3',
                    doing: '2',
                    completed: '6',
                    progress: 20,
                    color: 'orange'
                },
                {
                    projectName: '应急项目',
                    position: '正常',
                    total: '15',
                    notStarted: '4',
                    doing: '5',
                    completed: '6',
                    progress: 20,
                    color: 'orange'
                }
            ]
        }
    },
    methods: {
        handleClick(tab, event) {

        }
    }
}
</script>

<style lang="scss" scoped>
.divider {
    height: 50px;
    background-color: blue;
    width: 20px;
}
</style>
